import { ref, toRefs, reactive } from 'vue';
import { useRouter } from 'vue-router';
import useDirectoryTree from '@/views/design-center/store/directory-tree';
// 目录树的hook
export const useCatalogue = (props, getFileListApi) => {
  const router = useRouter();
  const useDirectoryTreeStore = useDirectoryTree();

  const { treeList, treeCurrentData } = toRefs(useDirectoryTreeStore);

  const defaultProps = {
    children: 'reportList',
    label: 'reportName'
  };

  const treeFormData = reactive({
    reportName: '',
    page: 0,
    size: 200000,
    type: props.pageType === 'screen' ? 1 : 2
  });
  /**
   * @description: 创建大屏的查询
   * @return {*}
   */
  const handleInputBlurSearch = () => {
    getFileList(treeFormData);
  };
  /**
   * @description: 获取目录和大屏列表
   * @return {*}
   */
  const getFileList = async () => {
    let res = await getFileListApi(treeFormData);
    let arr = res?.data?.data.map((item) => {
      if (item.id) {
        return {
          ...item,
          reportName: item.name
        };
      } else {
        return item.reportList[0];
      }
    });
    treeList.value = arr;
    // treeCurrentData.value = arr[0];

    // console.log('----------res', arr);
  };
  getFileList();

  /**
   * @description: 大屏树结构点击
   * @return {*}
   */
  const handleTreeNodeClick = (data) => {
    console.log(props.pageType, '000000000000props', data);
    // console.log(data.type, 111111, data.pageConfig, data.id, data);
    treeCurrentData.value = data;

    // useComponentConfigStore.pageConfig = data.pageConfig;

    let name = '';
    //不是目录的时候
    if (!data.reportList) {
      // 没值的时候进行新建
      if (!data.config) {
        console.log('编辑来了');
        name =
          props.pageType === 'screen'
            ? 'edit-scree-enter'
            : 'edit-report-enter';
        router.push({
          name,
          query: {
            id: data.id,
            reportName: data.reportName
          }
        });
      } else {
        // 有值的时候进行预览

        console.log('预览来了', data.id);
        name =
          props.pageType === 'screen' ? 'preview-screen' : 'preview-report';
        router.push({
          name: name,
          query: {
            id: data.id,
            reportName: data.reportName
          }
        });
      }
    } else {
      //是目录的时候
      // name = 'catalog-page';
      console.log('目录来了', props.pageType);
      name =
        props.pageType === 'screen'
          ? 'screen-catalog-page'
          : 'report-catalog-page';
      // router.push({
      //   name
      // });
    }
  };

  return {
    defaultProps,
    treeFormData,
    handleInputBlurSearch,
    handleTreeNodeClick,
    getFileList
  };
};
